<style lang="less">
  @import '../styles/common.less';
  @import '../tables/components/table.less';
  @import './style/comments.less';
</style>
<style>
  .more {
    margin: 10px 0px;
    color: #777777;
  }
</style>
<!-- 任务：评论回复 + 操作日志 -->
<template>
  <div class="reply_list">
    <div v-for="el in data" v-if="el.id">
      <div class="user">
        <table class="table" cellpadding="0" cellspacing="0">
          <tr>
            <td class="td1">
              <img class="cursor" :src="el.from.thumb" alt="头像" v-if="el.from && el.from.thumb"
                   @click="searchUserInfo(el.from.id)">
              <img class="cursor" src="/vendors/images/person.png" alt="头像" v-if="!(el.from && el.from.thumb)"
                   @click="searchUserInfo(el.from.id)">
            </td>
            <td class="td3">
              <div class="name" v-text="el.from.name"></div>
            </td>
            <td class="td2" v-if="el.to && el.to.name && el.type != 'log'">
              <div class="name to">回复</div>
            </td>
            <td class="td3" v-if="el.to && el.to.name && el.type != 'log'">
              <div class="name" v-text="el.to.name"></div>
            </td>
            <td>
              <div class="time" v-text="el.create_time"></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="content padding-left-66 word-wrap" v-html="el.content"></div>
      <div class="action padding-left-66" v-if="el.type != 'log'">
        <div class="support" @click="supportFun(el.id, el.praise.is_thumb, 'one')"
             v-if="el.show_comments_input != true">
          <Icon type="ios-thumbs-up" class="icon-red"
                v-if="el.praise.is_thumb.toString() == 'true' && el.praise.is_thumb.toString() != ''"/>
          <Icon type="ios-thumbs-up-outline"
                v-if="el.praise.is_thumb.toString() == 'false' || el.praise.is_thumb.toString() == ''"/>
          {{el.praise.up_number}}
        </div>
        <div class="comments" @click="commentsFun(el.id)" v-if="el.show_comments_input == true">
          <Icon type="ios-undo"/>
          <span>取消回复</span>
        </div>
        <div class="comments" @click="commentsFun(el.id)" v-if="el.show_comments_input != true">
          <Icon type="ios-undo"/>
          <span>回复</span>
        </div>
        <div class="comments" @click="show_dialogue(el.id)" v-if="el.show_comments_input != true && el.reply_count > 0">
          <Icon type="ios-text-outline"/>
          <span>查看对话</span>
        </div>
      </div>
      <div class="input padding-left-66" v-if="el.show_comments_input == true && el.type != 'log'">
        <div class="reply-input-div">
          <Input v-model="reply_content" type="textarea" class="textarea_resize"
                 :autosize="{minRows: 1, maxRows: 5}" :placeholder="'回复' + el.from.name"></Input>
        </div>
        <Button type="primary" class="Button reply_textarea_Button" @click="reply_add(el.id, el.from.id)"
                :disabled="reply_content == '' ? true : false">评论
        </Button>
      </div>
    </div>
    <div class="page more" v-if="total > 10">
      <span class="cursor" @click="moreFun()" id="more_span">更多动态</span>
    </div>
    <div class="input input-border">
      <div class="input-div">
        <Input v-model="content" type="textarea" class="textarea_resize"
               :autosize="{minRows: 1, maxRows: 5}" placeholder="写下你的评论..."></Input>
      </div>
      <Button type="primary" class="Button textarea_Button" @click="add()" :disabled="content == '' ? true : false">评论
      </Button>
    </div>

    <Modal :width="600" title="查看对话"
           v-model="showCurrentTableData"
           ok-text="确定"
           cancel-text="取消"
           @on-ok=""
           @on-cancel=""
           class-name="vertical-center-modal"
           class="Modal-Detail-div">
      <div class="reply_list">
        <div v-for="el in data_second" class="reply_list_second">
          <div class="user">
            <table class="table" cellpadding="0" cellspacing="0">
              <tr>
                <td class="td1">
                  <img :src="el.from.thumb" alt="头像" v-if="el.from && el.from.thumb">
                  <img src="/vendors/images/person.png" alt="头像" v-if="!(el.from && el.from.thumb)">
                  <!--<div class="img-div" v-if="!(el.from && el.from.thumb)" v-text="el.from.name.substring(0,1)"></div>-->
                </td>
                <td class="td3">
                  <div class="name" v-text="el.from.name"></div>
                </td>
                <td class="td2">
                  <div class="name to" v-if="el.to && el.to.name">回复</div>
                </td>
                <td class="td3">
                  <div class="name" v-if="el.to && el.to.name" v-text="el.to.name"></div>
                </td>
                <td>
                  <div class="time" v-text="el.create_time"></div>
                </td>
              </tr>
            </table>
          </div>
          <div class="content padding-left-66 word-wrap" v-html="el.content"></div>
          <div class="action padding-left-66">
            <div class="support" @click="supportFun(el.id, el.praise.is_thumb, 'two')">
              <Icon type="ios-thumbs-up" class="icon-red"
                    v-if="el.praise.is_thumb.toString() == 'true' && el.praise.is_thumb.toString() != ''"/>
              <Icon type="ios-thumbs-up-outline"
                    v-if="el.praise.is_thumb.toString() == 'false' || el.praise.is_thumb.toString() == ''"/>
              {{el.praise.up_number}}
            </div>
          </div>
        </div>
        <div class="page" v-if="total_second > 0">
          <Page :total="total_second" :current="page_second" size="small" @on-change="changePage_second"
                show-elevator></Page>
        </div>
      </div>
    </Modal>
    <!--人员详情-->
    <user-info
      :user_id="userInfo_id"
      @userInfoBackFun="userInfoBackFun"
    ></user-info>
  </div>
</template>

<script>
  import Cookies from 'js-cookie';
  import Util from '../../libs/util';
  import Utils from '../../libs/mod.utils';
  import String from '../../libs/mod.string';
  import Modal from '../../libs/mod.Modal';
  import userAvatar from '../components/user-avatar.vue';
  import userInfo from '../components/user-info.vue';
  export default {
    name: 'commentsList',
    props: ['reply_type', 'reply_type_id'],
    components: {
      userAvatar,
      userInfo
    },
    data () {
      return {
        type: '',
        type_id: '',
        uid: Util.toJson(localStorage.getItem('userInfo')).id,
        total: 0,
        page: 1,
        size: 10,
        total_second: 0,
        page_second: 1,
        id: '',
        data: {},
        data_second: {},
        content: '',
        reply_content: '',
        showCurrentTableData: false,
        dialogue_rid: '',
        userInfo_id: '',// 查看用户详情的用户id
        list_type: 'ten',// 前10条
      };
    },
    created: function () {
      var _this = this;
      _this.type = _this.reply_type;
      _this.type_id = _this.reply_type_id;

      _this.get_reply_list();
    },
    watch: {
      reply_type_id: function () {
        var _this = this;
        _this.list_type = 'ten';
        _this.type = _this.reply_type;
        _this.type_id = _this.reply_type_id;
        _this.get_reply_list();
      }
    },
    mounted () {
      var _this = this;
    },
    methods: {
      // 查看用户详情
      searchUserInfo: function (id) {
        var _this = this;
        _this.userInfo_id = id;
      },
      userInfoBackFun: function (id) {
        var _this = this;
        _this.userInfo_id = id;
      },
      get_reply_list: function () {
        var _this = this;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          type: _this.list_type,
          tid: _this.type_id,
        };
        var params = {
          url: '/task/news',
          //domain: 'http://sd.jnaw.top/sd2-mock',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || [];
            _this.total = res.rows;

            if (_this.list_type == 'ten') {
              var dataObj = {};
            } else {
              var dataObj = _this.data;
            }
            for (var k in _data) {
              if (!_data[k]) {
                continue;
              }
              var id = _data[k].id;
              var key = 'reply_key_' + _this.type + '_' + id;
              if (!dataObj[key]) {
                dataObj[key] = {};
              }
              _data[k].show_comments_input = false;
              dataObj[key] = _data[k];
            }
            _this.data = dataObj;
          } else {
            _this.$Message.destroy();
            _this.$Message.error('查询评论信息失败!');
          }
        }
      },
      // 一级评论
      add: function () {
        var _this = this;
        var content = _this.content;
        if (content == '') {
          _this.$Message.destroy();
          _this.$Message.error('请填写评论!');
          return false;
        }
        _this.save_reply(_this.type, _this.type_id, 0, '', content, function (res) {
          if (res.result == 0) {
            _this.content = '';
            _this.page = 1;
            _this.get_reply_list();
          } else {
            _this.$Message.destroy();
            _this.$Message.error('发送评论失败!');
          }
        });
      },
      // 二级评论
      reply_add: function (rid, to) {
        var _this = this;
        var content = _this.reply_content;
        if (content == '') {
          _this.$Message.destroy();
          _this.$Message.error('请填写评论!');
          return false;
        }
        _this.save_reply(_this.type, _this.type_id, rid, to, content, function (res) {
          if (res.result == 0) {
            _this.reply_content = '';
            _this.commentsFun(rid);
            _this.get_reply_list();
          } else {
            _this.$Message.destroy();
            _this.$Message.error('发送评论失败!');
          }
        });
      },
      // 保存评论
      save_reply: function (type, type_id, rid, to, content, _successFun) {
        var _this = this;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          type: type,
          type_id: type_id,
          rid: rid,
          to: to,
          content: content,
        };
        var params = {
          url: '/reply/add',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
      },
      // 支持
      supportFun: function (tid, is_support, type) {
        var _this = this;
        is_support = is_support.toString();
        if (is_support == 'true' && is_support != '') {//已经支持 -> 取消支持
          _this.evaluateSave(tid, 'reply', 'up', true, '', function (res) {
            if (res.result == 0) {
              if (type == 'one') {
                var key = 'reply_key_' + _this.type + '_' + tid;
                _this.data[key].praise.up_number = _this.data[key].praise.up_number - 1 >= 0 ? _this.data[key].praise.up_number - 1 : 0;
                _this.data[key].praise.is_thumb = '';
              } else {
                var key = 'reply_key_second_' + _this.type + '_' + tid;
                _this.data_second[key].praise.up_number = _this.data_second[key].praise.up_number - 1 >= 0 ? _this.data_second[key].praise.up_number - 1 : 0;
                _this.data_second[key].praise.is_thumb = '';
              }
            } else {
              _this.$Message.destroy();
              _this.$Message.error('保存信息失败!');
            }
          });
        } else if (is_support == 'false' && is_support != '') {//已经反对 -> 变为支持
          _this.evaluateSave(tid, 'reply', 'up', false, '', function (res) {
            if (res.result == 0) {
              if (type == 'one') {
                var key = 'reply_key_' + _this.type + '_' + tid;
                _this.data[key].praise.up_number = _this.data[key].praise.up_number + 1;
                _this.data[key].praise.down_number = _this.data[key].praise.down_number - 1 >= 0 ? _this.data[key].praise.down_number - 1 : 0;
                _this.data[key].praise.is_thumb = true;
              } else {
                var key = 'reply_key_second_' + _this.type + '_' + tid;
                _this.data_second[key].praise.up_number = _this.data_second[key].praise.up_number + 1;
                _this.data_second[key].praise.down_number = _this.data_second[key].praise.down_number - 1 >= 0 ? _this.data_second[key].praise.down_number - 1 : 0;
                _this.data_second[key].praise.is_thumb = true;
              }
            } else {
              _this.$Message.destroy();
              _this.$Message.error('保存信息失败!');
            }
          });
        } else if (is_support == '' && is_support != 'false' && is_support != 'true') {//未支持未反对 -> 支持
          _this.evaluateSave(tid, 'reply', 'up', false, '', function (res) {
            if (res.result == 0) {
              if (type == 'one') {
                var key = 'reply_key_' + _this.type + '_' + tid;
                _this.data[key].praise.up_number = _this.data[key].praise.up_number + 1;
                _this.data[key].praise.is_thumb = true;
              } else {
                var key = 'reply_key_second_' + _this.type + '_' + tid;
                _this.data_second[key].praise.up_number = _this.data_second[key].praise.up_number + 1;
                _this.data_second[key].praise.is_thumb = true;
              }
            } else {
              _this.$Message.destroy();
              _this.$Message.error('保存信息失败!');
            }
          });
        }
      },
      // 支持反对保存
      evaluateSave: function (tid, type, thumb_type, is_cancel, content, _successFun) {
        var _this = this;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          tid: tid,
          type: type,
          thumb_type: thumb_type,//"up": "好评","down": "差评"
          is_cancel: is_cancel,//"true为取消好评或取消差评",
          content: content,//备注
        };
        var params = {
          url: '/thumb/update',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
      },
      // 回复
      commentsFun: function (id) {
        var _this = this;
        _this.reply_content = '';
        var key = 'reply_key_' + _this.type + '_' + id;
        if (_this.data[key].show_comments_input) {
          _this.data[key].show_comments_input = false;
        } else {
          _this.data[key].show_comments_input = true;
        }
        for (var k in _this.data) {
          if (!_this.data[k]) {
            continue;
          }
          if (k != key) {
            _this.data[k].show_comments_input = false;
          }
        }
      },
      // 查看对话
      show_dialogue: function (rid) {
        var _this = this;
        _this.dialogue_rid = rid;
        _this.show_reply_list2();
      },
      show_reply_list2: function () {
        var _this = this;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          page: _this.page_second,
          size: _this.size,
          type: _this.type,
          type_id: _this.type_id,
          rid: _this.dialogue_rid,
        };
        var params = {
          url: '/reply/list',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || [];
            _this.total_second = res.rows;
            var dataObj = {};
            for (var k in _data) {
              if (!_data[k]) {
                continue;
              }
              var id = _data[k].id;
              var key = 'reply_key_second_' + _this.type + '_' + id;
              if (!dataObj[key]) {
                dataObj[key] = {};
              }
              dataObj[key] = _data[k];
            }
            _this.data_second = dataObj;
            _this.showCurrentTableData = true;
          } else {
            _this.$Message.destroy();
            _this.$Message.error('查询评论信息失败!');
          }
        }
      },
      // 翻页
      changePage: function (page) {
        var _this = this;
        _this.page = page;
        _this.get_reply_list();
      },
      // 对话翻页
      changePage_second: function (page) {
        var _this = this;
        _this.page_second = page;
        _this.show_reply_list2();
      },
      // 更多动态、收起
      moreFun: function () {
        var _this = this;
        if (_this.list_type == 'ten') {
          _this.list_type = 'all';
          $('#more_span').html('收起');
        } else {
          _this.list_type = 'ten';
          $('#more_span').html('更多动态');
        }
        _this.get_reply_list();
      },
    },
  };
</script>
